<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.2">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"wrr123.github.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="从零开始简单的路由 如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件。">
<meta property="og:type" content="article">
<meta property="og:title" content="vue-router基本使用">
<meta property="og:url" content="https://wrr123.github.io/2020/08/06/vue-router%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/index.html">
<meta property="og:site_name" content="一缕烟气">
<meta property="og:description" content="从零开始简单的路由 如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件。">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-08-06T05:33:03.000Z">
<meta property="article:modified_time" content="2022-02-18T02:52:04.526Z">
<meta property="article:author" content="田园隐士">
<meta property="article:tag" content="js">
<meta property="article:tag" content="vuejs">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://wrr123.github.io/2020/08/06/vue-router%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>vue-router基本使用 | 一缕烟气</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="一缕烟气" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">一缕烟气</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">沧海月明珠有泪，蓝田日暖玉生烟</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/08/06/vue-router%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          vue-router基本使用
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-08-06 13:33:03" itemprop="dateCreated datePublished" datetime="2020-08-06T13:33:03+08:00">2020-08-06</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>24k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>22 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h4 id="从零开始简单的路由"><a href="#从零开始简单的路由" class="headerlink" title="从零开始简单的路由"></a>从零开始简单的路由</h4><blockquote>
<p>如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件。</p>
</blockquote>
<span id="more"></span>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">NotFound</span> = &#123; <span class="attr">template</span>: <span class="string">&#x27;&lt;p&gt;Page not found&lt;/p&gt;&#x27;</span> &#125;</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Home</span> = &#123; <span class="attr">template</span>: <span class="string">&#x27;&lt;p&gt;home page&lt;/p&gt;&#x27;</span> &#125;</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">About</span> = &#123; <span class="attr">template</span>: <span class="string">&#x27;&lt;p&gt;about page&lt;/p&gt;&#x27;</span> &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = &#123;</span><br><span class="line">  <span class="string">&#x27;/&#x27;</span>: <span class="title class_">Home</span>,</span><br><span class="line">  <span class="string">&#x27;/about&#x27;</span>: <span class="title class_">About</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">  <span class="attr">data</span>: &#123;</span><br><span class="line">    <span class="attr">currentRoute</span>: <span class="variable language_">window</span>.<span class="property">location</span>.<span class="property">pathname</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">computed</span>: &#123;</span><br><span class="line">    <span class="title class_">ViewComponent</span> () &#123;</span><br><span class="line">      <span class="keyword">return</span> routes[<span class="variable language_">this</span>.<span class="property">currentRoute</span>] || <span class="title class_">NotFound</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  render (h) &#123; <span class="keyword">return</span> <span class="title function_">h</span>(<span class="variable language_">this</span>.<span class="property">ViewComponent</span>) &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h4 id="Vue-Router基础篇"><a href="#Vue-Router基础篇" class="headerlink" title="Vue Router基础篇"></a>Vue Router基础篇</h4><h5 id="基本介绍"><a href="#基本介绍" class="headerlink" title="基本介绍"></a>基本介绍</h5><p>Vue Router是<code>vue.js</code>的官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>
<ul>
<li>嵌套的路由/视图表</li>
<li>模块化的、基于组件的路由配置</li>
<li>路由参数、查询、通配符</li>
<li>基于Vue.js过渡系统的视图过渡效果</li>
<li>细粒度的导航控制</li>
<li>带有自动激活的CSS class的链接</li>
<li>HTML5历史模式或hash模式，在ie9中自动降级</li>
<li>自定义的滚动条行为</li>
</ul>
<h5 id="起步"><a href="#起步" class="headerlink" title="起步"></a>起步</h5><blockquote>
<p>用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。</p>
</blockquote>
<h6 id="Html"><a href="#Html" class="headerlink" title="Html"></a>Html</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue-router/dist/vue-router.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello App!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 使用 router-link 组件来导航. --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 通过传入 `to` 属性指定链接. --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;router-link&gt; 默认会被渲染成一个 `&lt;a&gt;` 标签 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/foo&quot;</span>&gt;</span>Go to Foo<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/bar&quot;</span>&gt;</span>Go to Bar<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 路由出口 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 路由匹配到的组件将渲染在这里 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h6 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a>JavaScript</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 定义 (路由) 组件。</span></span><br><span class="line"><span class="comment">// 可以从其他文件 import 进来</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Foo</span> = &#123; <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;foo&lt;/div&gt;&#x27;</span> &#125;</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Bar</span> = &#123; <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;bar&lt;/div&gt;&#x27;</span> &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 定义路由</span></span><br><span class="line"><span class="comment">// 每个路由应该映射一个组件。 其中&quot;component&quot; 可以是</span></span><br><span class="line"><span class="comment">// 通过 Vue.extend() 创建的组件构造器，</span></span><br><span class="line"><span class="comment">// 或者，只是一个组件配置对象。</span></span><br><span class="line"><span class="comment">// 我们晚点再讨论嵌套路由。</span></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">&#x27;/foo&#x27;</span>, <span class="attr">component</span>: <span class="title class_">Foo</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">&#x27;/bar&#x27;</span>, <span class="attr">component</span>: <span class="title class_">Bar</span> &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 创建 router 实例，然后传 `routes` 配置</span></span><br><span class="line"><span class="comment">// 你还可以传别的配置参数, 不过先这么简单着吧。</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  routes <span class="comment">// (缩写) 相当于 routes: routes</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 创建和挂载根实例。</span></span><br><span class="line"><span class="comment">// 记得要通过 router 配置参数注入路由，</span></span><br><span class="line"><span class="comment">// 从而让整个应用都有路由功能</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  router</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 现在，应用已经启动了！</span></span><br></pre></td></tr></table></figure>
<p>通过注入路由，我们可以在任何组件内通过<code>this.$router</code>来访问路由器，也可以通过<code>this.$router</code>来访问当前路由。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Home.vue</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">computed</span>: &#123;</span><br><span class="line">    <span class="title function_">username</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="comment">// 我们很快就会看到 `params` 是什么</span></span><br><span class="line">      <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.<span class="property">username</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="title function_">goBack</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">window</span>.<span class="property">history</span>.<span class="property">length</span> &gt; <span class="number">1</span> ? <span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">go</span>(-<span class="number">1</span>) : <span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(<span class="string">&#x27;/&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>该文档通篇都常使用 <code>router</code> 实例。留意一下 <code>this.$router</code> 和 <code>router</code> 使用起来完全一样。我们使用 <code>this.$router</code> 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。</p>
</blockquote>
<h5 id="动态路由匹配"><a href="#动态路由匹配" class="headerlink" title="动态路由匹配"></a>动态路由匹配</h5><p>我们经常需要把某种模式匹配到所有的路由，全部映射到同一个组件。</p>
<p>例如，我们有一个<code>User</code>组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。</p>
<p>那么我们可以在<code>vue-router</code>的路由路径中使用”动态路径参数”(dynamic segment)来达到这个效果。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">User</span> = &#123;</span><br><span class="line">  <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;User&lt;/div&gt;&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    <span class="comment">// 动态路径参数 以冒号开头</span></span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: <span class="title class_">User</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>现在呢，像<code>/user/foo</code>和<code>user/bar</code>都将映射到相同的路径。</p>
<p>一个”路径参数”使用冒号<code>:</code>标记。当匹配到一个路由时，参数值会被设置到<code>this.$router.params</code>,可以在每个组件中使用。于是，我们可以更新<code>User</code>的模板，输出当前用户的ID。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">User</span> = &#123;</span><br><span class="line">  <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;User &#123;&#123; $route.params.id &#125;&#125;&lt;/div&gt;&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>你可以在一个路由中设置多段”路径参数”，对应的值会被设置到<code>$router.params</code>中。例如:</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>模式</th>
<th>匹配路径</th>
<th>$route.params</th>
</tr>
</thead>
<tbody>
<tr>
<td>/user/:username</td>
<td>/user/evan</td>
<td><code>&#123; username: &#39;evan&#39; &#125;</code></td>
</tr>
<tr>
<td>/user/:username/post/:post_id</td>
<td>/user/evan/post/123</td>
<td><code>&#123; username: &#39;evan&#39;, post_id: &#39;123&#39; &#125;</code></td>
</tr>
</tbody>
</table>
</div>
<p><em>除了<code>$router.params</code>之外，<code>$router</code>对象还提供了其它有用的信息，例如，<code>$router.query</code>(如果URL中有查询参数)、<code>$router.hash</code>等等</em></p>
<h6 id="响应路由参数的变化"><a href="#响应路由参数的变化" class="headerlink" title="响应路由参数的变化"></a>响应路由参数的变化</h6><p>当使用路由参数时，例如从<code>/user/foo</code>导航到<code>/user/bar</code>，<strong>原来的组件实例会被复用</strong>。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。<strong>不过，这也意味着组件的生命周期钩子不会再被调用</strong>。</p>
<p>复用组件时，若想对路由参数的变化作出响应的话，可以简单的<code>watch</code>(监测变化)<code>$router</code>对象。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">User</span> = &#123;</span><br><span class="line">  <span class="attr">template</span>: <span class="string">&#x27;...&#x27;</span>,</span><br><span class="line">  <span class="attr">watch</span>: &#123;</span><br><span class="line">    $route(to, <span class="keyword">from</span>) &#123;</span><br><span class="line">      <span class="comment">// 对路由变化作出响应...</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>或者使用 <code>beforeRouterUpdate</code> <strong>导航守卫</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">User</span> = &#123;</span><br><span class="line">  <span class="attr">template</span>: <span class="string">&#x27;...&#x27;</span>,</span><br><span class="line">  beforeRouteUpdate (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">    <span class="comment">// react to route changes...</span></span><br><span class="line">    <span class="comment">// don&#x27;t forget to call next()</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h6 id="捕获所有的路由或404-Not-found-路由"><a href="#捕获所有的路由或404-Not-found-路由" class="headerlink" title="捕获所有的路由或404 Not found 路由"></a>捕获所有的路由或404 Not found 路由</h6><p>常规参数只会匹配被<code>/</code>分割的URL片段中的字符。如果想匹配<strong>任意路径</strong>，我们可以使用通配符(<code>*</code>)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="comment">// 会匹配所有路径</span></span><br><span class="line">  <span class="attr">path</span>: <span class="string">&#x27;*&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">&#123;</span><br><span class="line">  <span class="comment">// 会匹配以 `/user-` 开头的任意路径</span></span><br><span class="line">  <span class="attr">path</span>: <span class="string">&#x27;/user-*&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>当使用 <em>通配符</em> 路由时，请确保路由的顺序是正确的，也就是说含有 <em>通配符</em> 的路由应该放在 <strong>最后</strong>。</p>
<p>路由 <code>&#123;path: *&#125;</code> 通常用于客户端404错误。如果你使用了 <em>History</em> 模式，请确保 <strong>正确配置你的服务器</strong>。</p>
<p>当使用一个 <em>通配符</em> 时，<code>$router.params</code>内会自动添加一个名为 <code>pathMatch</code> 的参数。</p>
<p>它包含了URL通过 <em>通配符</em> 被匹配的部分：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 给出一个路由 &#123; path: &#x27;/user-*&#x27; &#125;</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(<span class="string">&#x27;/user-admin&#x27;</span>)</span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.<span class="property">pathMatch</span> <span class="comment">// &#x27;admin&#x27;</span></span><br><span class="line"><span class="comment">// 给出一个路由 &#123; path: &#x27;*&#x27; &#125;</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(<span class="string">&#x27;/non-existing&#x27;</span>)</span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.<span class="property">pathMatch</span> <span class="comment">// &#x27;/non-existing&#x27;</span></span><br></pre></td></tr></table></figure>
<h6 id="高级匹配模式"><a href="#高级匹配模式" class="headerlink" title="高级匹配模式"></a>高级匹配模式</h6><p><code>vue-router</code> 使用 <strong>path-to-regexp</strong> 作为路径匹配引擎，所以支持很多的高级匹配模式。</p>
<p>例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义的正则匹配。</p>
<h6 id="匹配优先级"><a href="#匹配优先级" class="headerlink" title="匹配优先级"></a>匹配优先级</h6><p>有时候同一个路径可以匹配多个路由，此时，匹配的优先级就按照 <strong>路由的定义顺序：谁先定义的，谁的优先级就高</strong>。</p>
<h5 id="嵌套路由"><a href="#嵌套路由" class="headerlink" title="嵌套路由"></a>嵌套路由</h5><p>实际生活中的应用界面，通常是由多层嵌套的组件组合而成的。</p>
<p>同样的，URL中各段动态路径也按某种结构对应嵌套的各层组件，例如：</p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">/user/foo/profile                     /user/foo/posts</span><br><span class="line">+------------------+                  +-----------------+</span><br><span class="line">| User             |                  | User            |</span><br><span class="line">| +--------------+ |                  | +-------------+ |</span><br><span class="line">| | Profile      | |  +------------&gt;  | | Posts       | |</span><br><span class="line">| |              | |                  | |             | |</span><br><span class="line">| +--------------+ |                  | +-------------+ |</span><br><span class="line">+------------------+                  +-----------------+</span><br></pre></td></tr></table></figure>
<p>借助 <code>vue-router</code> ,使用嵌套路由配置，就可以很简单的表达这种关系。</p>
<p>看下面的栗子：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">User</span> = &#123;</span><br><span class="line">  <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;User &#123;&#123; $route.params.id &#125;&#125;&lt;/div&gt;&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: <span class="title class_">User</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这里的 <code>&lt;router-view&gt;</code>是最顶层的出口，渲染最高级路由匹配到的组件。同样的，一个被渲染组件同样可以包含自己的嵌套 <code>&lt;router-view&gt;</code>。</p>
<p>例如，在<code>User</code>组件的模板添加一个<code>&lt;router-view&gt;</code>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">User</span> = &#123;</span><br><span class="line">  <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class=&quot;user&quot;&gt;</span></span><br><span class="line"><span class="string">      &lt;h2&gt;User &#123;&#123; $route.params.id &#125;&#125;&lt;/h2&gt;</span></span><br><span class="line"><span class="string">      &lt;router-view&gt;&lt;/router-view&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>要在嵌套的出口中渲染组件，需要在<code>VueRouter</code>的参数中使用<code>children</code>配置：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: <span class="title class_">User</span>,</span><br><span class="line">      <span class="attr">children</span>: [</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="comment">// 当 /user/:id/profile 匹配成功，</span></span><br><span class="line">          <span class="comment">// UserProfile 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">          <span class="attr">path</span>: <span class="string">&#x27;profile&#x27;</span>,</span><br><span class="line">          <span class="attr">component</span>: <span class="title class_">UserProfile</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="comment">// 当 /user/:id/posts 匹配成功</span></span><br><span class="line">          <span class="comment">// UserPosts 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">          <span class="attr">path</span>: <span class="string">&#x27;posts&#x27;</span>,</span><br><span class="line">          <span class="attr">component</span>: <span class="title class_">UserPosts</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>要注意，以 <code>/</code> 开头的嵌套路径会被当做根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径</strong>。</p>
<p>你会发现，<code>children</code>配置就是像<code>routes</code>配置一样的路由配置数组，所以呢，你可以嵌套多层路由。</p>
<p>此时，基于上面的配置，当你访问<code>/user/foo</code>时，<code>User</code>的出口是不会渲染任何东西的，这是因为没有匹配到合适的 <em>子路由</em>。如果你想要渲染点什么的话，可以提供一个 <em>空的</em> 子路由：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: <span class="title class_">User</span>,</span><br><span class="line">      <span class="attr">children</span>: [</span><br><span class="line">        <span class="comment">// 当 /user/:id 匹配成功，</span></span><br><span class="line">        <span class="comment">// UserHome 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">        &#123; <span class="attr">path</span>: <span class="string">&#x27;&#x27;</span>, <span class="attr">component</span>: <span class="title class_">UserHome</span> &#125;,</span><br><span class="line"></span><br><span class="line">        <span class="comment">// ...其他子路由</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h5 id="编程式的导航"><a href="#编程式的导航" class="headerlink" title="编程式的导航"></a>编程式的导航</h5><p>除了使用<code>&lt;router-link&gt;</code>创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。</p>
<h6 id="router-push-location-onComplete-onAbort"><a href="#router-push-location-onComplete-onAbort" class="headerlink" title="router.push(location, onComplete?, onAbort?)"></a><code>router.push(location, onComplete?, onAbort?)</code></h6><p><strong>注意：在Vue实例内部，你可以通过<code>$router</code>访问路由实例。因此你可以调用<code>this.$router.push</code></strong></p>
<p>想要导航到不同的url，则使用<code>router.push</code>方法。</p>
<p>这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。</p>
<p>当你点击<code>&lt;router-link&gt;</code>时，这个方法会在内部调用，所以说，点击<code>&lt;router-link to=&quot;...&quot;&gt;</code>等同于调用<code>router.push(...)</code>。</p>
<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">声明式</th>
<th style="text-align:center">编程式</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><code>&lt;router-link :to=&quot;...&quot;&gt;</code></td>
<td style="text-align:center">router.push(…)</td>
</tr>
</tbody>
</table>
</div>
<p><em>该方法的参数可以是一个字符串路径，或者一个描述地址的对象</em>。例如：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串</span></span><br><span class="line">router.<span class="title function_">push</span>(<span class="string">&#x27;home&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象</span></span><br><span class="line">router.<span class="title function_">push</span>(&#123; <span class="attr">path</span>: <span class="string">&#x27;home&#x27;</span> &#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 命名的路由</span></span><br><span class="line">router.<span class="title function_">push</span>(&#123; <span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span>, <span class="attr">params</span>: &#123; <span class="attr">userId</span>: <span class="string">&#x27;123&#x27;</span> &#125;&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 带查询参数，变成 /register?plan=private</span></span><br><span class="line">router.<span class="title function_">push</span>(&#123; <span class="attr">path</span>: <span class="string">&#x27;register&#x27;</span>, <span class="attr">query</span>: &#123; <span class="attr">plan</span>: <span class="string">&#x27;private&#x27;</span> &#125;&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>注意：如果提供了<code>path</code>，<code>params</code>会被忽略，上述例子中的<code>query</code>并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的<code>name</code>或手写完整的带有参数的<code>path</code></strong>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> userId = <span class="string">&#x27;123&#x27;</span></span><br><span class="line">router.<span class="title function_">push</span>(&#123; <span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span>, <span class="attr">params</span>: &#123; userId &#125;&#125;) <span class="comment">// -&gt; /user/123</span></span><br><span class="line">router.<span class="title function_">push</span>(&#123; <span class="attr">path</span>: <span class="string">`/user/<span class="subst">$&#123;userId&#125;</span>`</span> &#125;) <span class="comment">// -&gt; /user/123</span></span><br><span class="line"><span class="comment">// 这里的 params 不生效</span></span><br><span class="line">router.<span class="title function_">push</span>(&#123; <span class="attr">path</span>: <span class="string">&#x27;/user&#x27;</span>, <span class="attr">params</span>: &#123; userId &#125;&#125;) <span class="comment">// -&gt; /user</span></span><br></pre></td></tr></table></figure>
<p>同样的规则也适用于<code>router-link</code>组件的<code>to</code>属性。</p>
<blockquote>
<p>在 2.2.0+，可选的在 <code>router.push</code> 或 <code>router.replace</code> 中提供 <code>onComplete</code> 和 <code>onAbort</code> 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，<code>router.push</code> 或 <code>router.replace</code> 将返回一个 Promise。</p>
<p><strong>注意</strong>： 如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 <code>/users/1</code> -&gt; <code>/users/2</code>)，你需要使用 <a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化"><code>beforeRouteUpdate</code></a> 来响应这个变化 (比如抓取用户信息)。</p>
</blockquote>
<h6 id="router-replace-location-onComplete-onAbort"><a href="#router-replace-location-onComplete-onAbort" class="headerlink" title="router.replace(location, onComplete?, onAbort?)"></a><code>router.replace(location, onComplete?, onAbort?)</code></h6><p>跟<code>router.push</code>很像，唯一不同的就是，它不会向history添加新记录，而是跟它的方法名一样，<strong>替换掉当前的history记录</strong>。</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>声明式</th>
<th>编程式</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;router-link :to=&quot;...&quot; replace&gt;</code></td>
<td><code>router.replace(...)</code></td>
</tr>
</tbody>
</table>
</div>
<h6 id="router-go-n"><a href="#router-go-n" class="headerlink" title="router.go(n)"></a><code>router.go(n)</code></h6><p>这个方法的参数是一个整数，意思是在history记录中间向前或者后退多少步，类似<code>window.hostory.go(n)</code>。</p>
<p>一个栗子</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在浏览器记录中前进一步，等同于 history.forward()</span></span><br><span class="line">router.<span class="title function_">go</span>(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 后退一步记录，等同于 history.back()</span></span><br><span class="line">router.<span class="title function_">go</span>(-<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 前进 3 步记录</span></span><br><span class="line">router.<span class="title function_">go</span>(<span class="number">3</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果 history 记录不够用，那就默默地失败呗</span></span><br><span class="line">router.<span class="title function_">go</span>(-<span class="number">100</span>)</span><br><span class="line">router.<span class="title function_">go</span>(<span class="number">100</span>)</span><br></pre></td></tr></table></figure>
<h6 id="操作-History"><a href="#操作-History" class="headerlink" title="操作 History"></a>操作 History</h6><blockquote>
<p>你也许注意到 <code>router.push</code>、 <code>router.replace</code> 和 <code>router.go</code> 跟 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/History"><code>window.history.pushState</code>、 <code>window.history.replaceState</code> 和 <code>window.history.go</code></a>好像， 实际上它们确实是效仿 <code>window.history</code> API 的。</p>
<p>Vue Router 的导航方法 (<code>push</code>、 <code>replace</code>、 <code>go</code>) 在各类路由模式 (<code>history</code>、 <code>hash</code> 和 <code>abstract</code>) 下表现一致。</p>
</blockquote>
<h5 id="命令路由"><a href="#命令路由" class="headerlink" title="命令路由"></a>命令路由</h5><p>有时候，通过一个名称来标识一个路由显得更方便一点，特别是在链接一个路由，或者是执行一些跳转的时候。</p>
<p>你可以在创建Router实例的时候，在<code>routes</code>配置中给某个路由设置名称。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/user/:userId&#x27;</span>,</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="title class_">User</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>要链接到一个命名路由，可以给<code>router-link</code>的<code>to</code>属性传一个对象：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">&quot;&#123; name: &#x27;user&#x27;, params: &#123; userId: 123 &#125;&#125;&quot;</span>&gt;</span>User<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>这跟代码调用<code>router.push()</code>是一回事：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">router.<span class="title function_">push</span>(&#123; <span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span>, <span class="attr">params</span>: &#123; <span class="attr">userId</span>: <span class="number">123</span> &#125;&#125;)</span><br></pre></td></tr></table></figure>
<p>这两种方式都会把路由导航到<code>/user/123</code>路径。</p>
<h5 id="命名视图"><a href="#命名视图" class="headerlink" title="命名视图"></a>命名视图</h5><p>有时候想同时(同级)展示多个视图，而不是嵌套展示，例如创建一个布局，有<code>sidebar</code>(侧导航)和<code>main</code>(主内容)两个视图，这个时候命名视图就派上用场了。</p>
<p>你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。</p>
<p>如果<code>router-view</code>没有设置名字，那么默认为<code>default</code>。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-view</span> <span class="attr">class</span>=<span class="string">&quot;view one&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-view</span> <span class="attr">class</span>=<span class="string">&quot;view two&quot;</span> <span class="attr">name</span>=<span class="string">&quot;a&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-view</span> <span class="attr">class</span>=<span class="string">&quot;view three&quot;</span> <span class="attr">name</span>=<span class="string">&quot;b&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>一个视图使用一个组件渲染，因此对于同一个路由，多个视图就需要多个组件。</p>
<p>确保正确使用<code>componets</code>配置(<strong>带上s</strong>):</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">      <span class="attr">components</span>: &#123;</span><br><span class="line">        <span class="attr">default</span>: <span class="title class_">Foo</span>,</span><br><span class="line">        <span class="attr">a</span>: <span class="title class_">Bar</span>,</span><br><span class="line">        <span class="attr">b</span>: <span class="title class_">Baz</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h6 id="嵌套命名视图"><a href="#嵌套命名视图" class="headerlink" title="嵌套命名视图"></a>嵌套命名视图</h6><p>我们也有可能使用命名视图创建嵌套视图的复杂布局。</p>
<p>这时你也需要命名用到的嵌套<code>router-view</code>组件。</p>
<p>我们以一个设置面板为例：</p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">/settings/emails                                       /settings/profile</span><br><span class="line">+-----------------------------------+                  +------------------------------+</span><br><span class="line">| UserSettings                      |                  | UserSettings                 |</span><br><span class="line">| +-----+-------------------------+ |                  | +-----+--------------------+ |</span><br><span class="line">| | Nav | UserEmailsSubscriptions | |  +------------&gt;  | | Nav | UserProfile        | |</span><br><span class="line">| |     +-------------------------+ |                  | |     +--------------------+ |</span><br><span class="line">| |     |                         | |                  | |     | UserProfilePreview | |</span><br><span class="line">| +-----+-------------------------+ |                  | +-----+--------------------+ |</span><br><span class="line">+-----------------------------------+                  +------------------------------+</span><br></pre></td></tr></table></figure>
<ul>
<li><code>Nav</code>只是一个常规组件。</li>
<li><code>UserSettings</code>是一个视图组件。</li>
<li><code>UserEmailsSubscriptions</code>、<code>UserProfile</code>、<code>UserProfilePreview</code> 是嵌套的视图组件。</li>
</ul>
<p><strong>注意：<em>我们先忘记html/css具体的布局的样子，只专注在用到的组件上</em></strong>。</p>
<p><code>UserSettings</code>组件的<code>&lt;template&gt;</code>部分应该是类似下面的这段代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- UserSettings.vue --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>User Settings<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">NavBar</span>/&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-view</span>/&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">&quot;helper&quot;</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>然后你可以使用下面的这个路由配置来完成该布局：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">path</span>: <span class="string">&#x27;/settings&#x27;</span>,</span><br><span class="line">  <span class="comment">// 你也可以在顶级路由就配置命名视图</span></span><br><span class="line">  <span class="attr">component</span>: <span class="title class_">UserSettings</span>,</span><br><span class="line">  <span class="attr">children</span>: [&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;emails&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="title class_">UserEmailsSubscriptions</span></span><br><span class="line">  &#125;, &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;profile&#x27;</span>,</span><br><span class="line">    <span class="attr">components</span>: &#123;</span><br><span class="line">      <span class="attr">default</span>: <span class="title class_">UserProfile</span>,</span><br><span class="line">      <span class="attr">helper</span>: <span class="title class_">UserProfilePreview</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="重定向和别名"><a href="#重定向和别名" class="headerlink" title="重定向和别名"></a>重定向和别名</h5><h6 id="重定向"><a href="#重定向" class="headerlink" title="重定向"></a>重定向</h6><p>重定向也是通过<code>routes</code>配置来完成的，</p>
<p>下面的栗子是从<code>/a</code>重定向到<code>/b</code>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/a&#x27;</span>, <span class="attr">redirect</span>: <span class="string">&#x27;/b&#x27;</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>重定向的目标也可以是一个命名的路由：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/a&#x27;</span>, <span class="attr">redirect</span>: &#123; <span class="attr">name</span>: <span class="string">&#x27;foo&#x27;</span> &#125;&#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>甚至是一个方法，动态返回重定向目标：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/a&#x27;</span>, <span class="attr">redirect</span>: <span class="function"><span class="params">to</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 方法接收 目标路由 作为参数</span></span><br><span class="line">      <span class="comment">// return 重定向的 字符串路径/路径对象</span></span><br><span class="line">    &#125;&#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>注意<code>导航守卫</code>并没有应用在跳转路由上，而仅仅应用在其目标上。</strong></p>
<p>一个高级的栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import VueRouter from &#x27;vue-router&#x27;</span><br><span class="line"></span><br><span class="line">Vue.use(VueRouter)</span><br><span class="line"></span><br><span class="line">const Home = &#123; template: &#x27;&lt;router-view&gt;&lt;/router-view&gt;&#x27; &#125;</span><br><span class="line">const Default = &#123; template: &#x27;&lt;div&gt;default&lt;/div&gt;&#x27; &#125;</span><br><span class="line">const Foo = &#123; template: &#x27;&lt;div&gt;foo&lt;/div&gt;&#x27; &#125;</span><br><span class="line">const Bar = &#123; template: &#x27;&lt;div&gt;bar&lt;/div&gt;&#x27; &#125;</span><br><span class="line">const Baz = &#123; template: &#x27;&lt;div&gt;baz&lt;/div&gt;&#x27; &#125;</span><br><span class="line">const WithParams = &#123; template: &#x27;&lt;div&gt;&#123;&#123; $route.params.id &#125;&#125;&lt;/div&gt;&#x27; &#125;</span><br><span class="line">const Foobar = &#123; template: &#x27;&lt;div&gt;foobar&lt;/div&gt;&#x27; &#125;</span><br><span class="line">const FooBar = &#123; template: &#x27;&lt;div&gt;FooBar&lt;/div&gt;&#x27; &#125;</span><br><span class="line"></span><br><span class="line">const router = new VueRouter(&#123;</span><br><span class="line">  mode: &#x27;history&#x27;,</span><br><span class="line">  base: __dirname,</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; path: &#x27;/&#x27;, component: Home,</span><br><span class="line">      children: [</span><br><span class="line">        &#123; path: &#x27;&#x27;, component: Default &#125;,</span><br><span class="line">        &#123; path: &#x27;foo&#x27;, component: Foo &#125;,</span><br><span class="line">        &#123; path: &#x27;bar&#x27;, component: Bar &#125;,</span><br><span class="line">        &#123; path: &#x27;baz&#x27;, name: &#x27;baz&#x27;, component: Baz &#125;,</span><br><span class="line">        &#123; path: &#x27;with-params/:id&#x27;, component: WithParams &#125;,</span><br><span class="line">        // relative redirect to a sibling route</span><br><span class="line">        &#123; path: &#x27;relative-redirect&#x27;, redirect: &#x27;foo&#x27; &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    // absolute redirect</span><br><span class="line">    &#123; path: &#x27;/absolute-redirect&#x27;, redirect: &#x27;/bar&#x27; &#125;,</span><br><span class="line">    // dynamic redirect, note that the target route `to` is available for the redirect function</span><br><span class="line">    &#123; path: &#x27;/dynamic-redirect/:id?&#x27;,</span><br><span class="line">      redirect: to =&gt; &#123;</span><br><span class="line">        const &#123; hash, params, query &#125; = to</span><br><span class="line">        if (query.to === &#x27;foo&#x27;) &#123;</span><br><span class="line">          return &#123; path: &#x27;/foo&#x27;, query: null &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        if (hash === &#x27;#baz&#x27;) &#123;</span><br><span class="line">          return &#123; name: &#x27;baz&#x27;, hash: &#x27;&#x27; &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        if (params.id) &#123;</span><br><span class="line">          return &#x27;/with-params/:id&#x27;</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">          return &#x27;/bar&#x27;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    // named redirect</span><br><span class="line">    &#123; path: &#x27;/named-redirect&#x27;, redirect: &#123; name: &#x27;baz&#x27; &#125;&#125;,</span><br><span class="line"></span><br><span class="line">    // redirect with params</span><br><span class="line">    &#123; path: &#x27;/redirect-with-params/:id&#x27;, redirect: &#x27;/with-params/:id&#x27; &#125;,</span><br><span class="line"></span><br><span class="line">    // redirect with caseSensitive</span><br><span class="line">    &#123; path: &#x27;/foobar&#x27;, component: Foobar, caseSensitive: true &#125;,</span><br><span class="line"></span><br><span class="line">    // redirect with pathToRegexpOptions</span><br><span class="line">    &#123; path: &#x27;/FooBar&#x27;, component: FooBar, pathToRegexpOptions: &#123; sensitive: true &#125;&#125;,</span><br><span class="line"></span><br><span class="line">    // catch all redirect</span><br><span class="line">    &#123; path: &#x27;*&#x27;, redirect: &#x27;/&#x27; &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  router,</span><br><span class="line">  template: `</span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">      &lt;h1&gt;Redirect&lt;/h1&gt;</span><br><span class="line">      &lt;ul&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/relative-redirect&quot;&gt;</span><br><span class="line">          /relative-redirect (redirects to /foo)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/relative-redirect?foo=bar&quot;&gt;</span><br><span class="line">          /relative-redirect?foo=bar (redirects to /foo?foo=bar)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/absolute-redirect&quot;&gt;</span><br><span class="line">          /absolute-redirect (redirects to /bar)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/dynamic-redirect&quot;&gt;</span><br><span class="line">          /dynamic-redirect (redirects to /bar)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/dynamic-redirect/123&quot;&gt;</span><br><span class="line">          /dynamic-redirect/123 (redirects to /with-params/123)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/dynamic-redirect?to=foo&quot;&gt;</span><br><span class="line">          /dynamic-redirect?to=foo (redirects to /foo)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/dynamic-redirect#baz&quot;&gt;</span><br><span class="line">          /dynamic-redirect#baz (redirects to /baz)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/named-redirect&quot;&gt;</span><br><span class="line">          /named-redirect (redirects to /baz)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/redirect-with-params/123&quot;&gt;</span><br><span class="line">          /redirect-with-params/123 (redirects to /with-params/123)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/foobar&quot;&gt;</span><br><span class="line">          /foobar</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/FooBar&quot;&gt;</span><br><span class="line">          /FooBar</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;router-link to=&quot;/not-found&quot;&gt;</span><br><span class="line">          /not-found (redirects to /)</span><br><span class="line">        &lt;/router-link&gt;&lt;/li&gt;</span><br><span class="line">      &lt;/ul&gt;</span><br><span class="line">      &lt;router-view class=&quot;view&quot;&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  `</span><br><span class="line">&#125;).$mount(&#x27;#app&#x27;)</span><br></pre></td></tr></table></figure>
<h5 id="别名"><a href="#别名" class="headerlink" title="别名"></a>别名</h5><p>“重定向”的意思是，当用户方位<code>/a</code>时，URL将会被替换成<code>/b</code>，然后匹配路由为<code>/b</code>，那么“别名”又是什么呢？</p>
<p><strong><code>/a</code>的别名是<code>/b</code>，意味着，当用户访问<code>/b</code>时，URL会保持为<code>/b</code>，但是路由匹配则为<code>/a</code>，就像用户访问<code>/a</code>一样。</strong></p>
<p>上面对应的路由匹配为：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/a&#x27;</span>, <span class="attr">component</span>: A, <span class="attr">alias</span>: <span class="string">&#x27;/b&#x27;</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><em>“别名”的功能让你可以自由的将UI结构映射到任意的URL，而不是受限于配置的嵌套路由结构。</em></p>
<h5 id="路由组件传参"><a href="#路由组件传参" class="headerlink" title="路由组件传参"></a>路由组件传参</h5><p>在组件中使用<code>$route</code>会使之与其对应路由形成高度的耦合，从而使组件只能在某些特定的URL上使用，限制其灵活性。</p>
<p><strong>使用<code>props</code>属性将组件和路由解耦</strong></p>
<ul>
<li><p>取代与<code>$route</code>的耦合</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">User</span> = &#123;</span><br><span class="line">  <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;User &#123;&#123; $route.params.id &#125;&#125;&lt;/div&gt;&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: <span class="title class_">User</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>通过<code>props</code>解耦</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">User</span> = &#123;</span><br><span class="line">  <span class="attr">props</span>: [<span class="string">&#x27;id&#x27;</span>],</span><br><span class="line">  <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;User &#123;&#123; id &#125;&#125;&lt;/div&gt;&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: <span class="title class_">User</span>, <span class="attr">props</span>: <span class="literal">true</span> &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：</span></span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>,</span><br><span class="line">      <span class="attr">components</span>: &#123; <span class="attr">default</span>: <span class="title class_">User</span>, <span class="attr">sidebar</span>: <span class="title class_">Sidebar</span> &#125;,</span><br><span class="line">      <span class="attr">props</span>: &#123; <span class="attr">default</span>: <span class="literal">true</span>, <span class="attr">sidebar</span>: <span class="literal">false</span> &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。</p>
</li>
</ul>
<h6 id="布尔模式"><a href="#布尔模式" class="headerlink" title="布尔模式"></a>布尔模式</h6><p>如果<code>props</code>被设置为<code>true</code>,<code>route.params</code>将会被设置为组件属性。</p>
<h6 id="对象模式"><a href="#对象模式" class="headerlink" title="对象模式"></a>对象模式</h6><p>如果<code>props</code>是一个对象，它会被按原样设置为组件属性。当<code>props</code>是静态的时候有用。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/promotion/from-newsletter&#x27;</span>, <span class="attr">component</span>: <span class="title class_">Promotion</span>, <span class="attr">props</span>: &#123; <span class="attr">newsletterPopup</span>: <span class="literal">false</span> &#125; &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h6 id="函数模式"><a href="#函数模式" class="headerlink" title="函数模式"></a>函数模式</h6><p>你可以创建一个函数返回<code>props</code>。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/search&#x27;</span>,</span><br><span class="line">      <span class="attr">components</span>: <span class="title class_">SearchUser</span>,</span><br><span class="line">      <span class="attr">props</span>: <span class="function">(<span class="params">route</span>) =&gt;</span> (&#123;<span class="attr">query</span>: route.<span class="property">query</span>.<span class="property">q</span>&#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>URL<code>/search?q=vue</code>会将<code>&#123;query: &#39;vue&#39;&#125;</code>作为属性传递给<code>SearchUser</code>组件。</p>
<p>请尽可能保持<code>props</code>函数为无状态的，因为它只会在路由发生变化时起作用。</p>
<p>如果你需要状态来定义<code>props</code>，请使用包装组件，这样Vue才可以对状态变化做出反应。</p>
<p>一个高级的栗子</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">VueRouter</span> <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Hello</span> <span class="keyword">from</span> <span class="string">&#x27;./Hello.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">VueRouter</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">dynamicPropsFn</span> (route) &#123;</span><br><span class="line">  <span class="keyword">const</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: (now.<span class="title function_">getFullYear</span>() + <span class="built_in">parseInt</span>(route.<span class="property">params</span>.<span class="property">years</span>)) + <span class="string">&#x27;!&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;history&#x27;</span>,</span><br><span class="line">  <span class="attr">base</span>: __dirname,</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>, <span class="attr">component</span>: <span class="title class_">Hello</span> &#125;, <span class="comment">// No props, no nothing</span></span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/hello/:name&#x27;</span>, <span class="attr">component</span>: <span class="title class_">Hello</span>, <span class="attr">props</span>: <span class="literal">true</span> &#125;, <span class="comment">// Pass route.params to props</span></span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/static&#x27;</span>, <span class="attr">component</span>: <span class="title class_">Hello</span>, <span class="attr">props</span>: &#123; <span class="attr">name</span>: <span class="string">&#x27;world&#x27;</span> &#125;&#125;, <span class="comment">// static values</span></span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/dynamic/:years&#x27;</span>, <span class="attr">component</span>: <span class="title class_">Hello</span>, <span class="attr">props</span>: dynamicPropsFn &#125;, <span class="comment">// custom logic for mapping between route and props</span></span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/attrs&#x27;</span>, <span class="attr">component</span>: <span class="title class_">Hello</span>, <span class="attr">props</span>: &#123; <span class="attr">name</span>: <span class="string">&#x27;attrs&#x27;</span> &#125;&#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  router,</span><br><span class="line">  <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div id=&quot;app&quot;&gt;</span></span><br><span class="line"><span class="string">      &lt;h1&gt;Route props&lt;/h1&gt;</span></span><br><span class="line"><span class="string">      &lt;ul&gt;</span></span><br><span class="line"><span class="string">        &lt;li&gt;&lt;router-link to=&quot;/&quot;&gt;/&lt;/router-link&gt;&lt;/li&gt;</span></span><br><span class="line"><span class="string">        &lt;li&gt;&lt;router-link to=&quot;/hello/you&quot;&gt;/hello/you&lt;/router-link&gt;&lt;/li&gt;</span></span><br><span class="line"><span class="string">        &lt;li&gt;&lt;router-link to=&quot;/static&quot;&gt;/static&lt;/router-link&gt;&lt;/li&gt;</span></span><br><span class="line"><span class="string">        &lt;li&gt;&lt;router-link to=&quot;/dynamic/1&quot;&gt;/dynamic/1&lt;/router-link&gt;&lt;/li&gt;</span></span><br><span class="line"><span class="string">        &lt;li&gt;&lt;router-link to=&quot;/attrs&quot;&gt;/attrs&lt;/router-link&gt;&lt;/li&gt;</span></span><br><span class="line"><span class="string">      &lt;/ul&gt;</span></span><br><span class="line"><span class="string">      &lt;router-view class=&quot;view&quot; foo=&quot;123&quot;&gt;&lt;/router-view&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
<h5 id="HTML5-History模式"><a href="#HTML5-History模式" class="headerlink" title="HTML5 History模式"></a>HTML5 History模式</h5><p><code>vue-route</code>默认hash模式——使用URL的hash来模拟一个完成的URL，于是当URL发生改变时，页面不会重新加载。</p>
<p>如果不想要很丑的hash，我们可以使用路由的 <strong>History模式</strong>，这种模式充分利用<code>history.pushState</code>API来完成URL跳转而无须重新加载页面。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;history&#x27;</span>,</span><br><span class="line">  <span class="attr">routes</span>: [...]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>当你使用history模式时，URL就像正常的url，例如<code>http://yoursite.com/user/id</code>，也好看！</p>
<p>不过这种模式要玩好，还需要后台的配置支持。因为我们的页面是一个单页面客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问<code>http://yoursite.com/user/id</code>就会报404错误，这就不好看啦！:cry:</p>
<p>所以呢，你要在服务器增加一个覆盖所有情况的 <strong>候选资源</strong>：如果URL匹配不到任何的静态资源，则应该返回同一个<code>index.html</code>页面，这个页面就是你app依赖的页面。</p>
<h6 id="后端配置栗子"><a href="#后端配置栗子" class="headerlink" title="后端配置栗子"></a>后端配置栗子</h6><p><strong>注意：下面示例假设你在根目录服务这个应用。</strong></p>
<blockquote>
<p>如果想部署到一个子目录，你需要使用 <a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/config/#publicpath">Vue CLI 的 <code>publicPath</code> 选项</a> 和相关的 <a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/api/#base">router <code>base</code> property</a>。你还需要把下列示例中的根目录调整成为子目录 (例如用 <code>RewriteBase /name-of-your-subfolder/</code> 替换掉 <code>RewriteBase /</code>)。</p>
<h4 id="Apache"><a href="#Apache" class="headerlink" title="Apache"></a>Apache</h4><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;IfModule mod_rewrite.c&gt;</span><br><span class="line">  RewriteEngine On</span><br><span class="line">  RewriteBase /</span><br><span class="line">  RewriteRule ^index\.html$ - [L]</span><br><span class="line">  RewriteCond %&#123;REQUEST_FILENAME&#125; !-f</span><br><span class="line">  RewriteCond %&#123;REQUEST_FILENAME&#125; !-d</span><br><span class="line">  RewriteRule . /index.html [L]</span><br><span class="line">&lt;/IfModule&gt;</span><br></pre></td></tr></table></figure>
<p>除了 <code>mod_rewrite</code>，你也可以使用 <a target="_blank" rel="noopener" href="https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource"><code>FallbackResource</code></a>。</p>
<p>nginx</p>
<figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">location</span> / &#123;</span><br><span class="line">  <span class="attribute">try_files</span> <span class="variable">$uri</span> <span class="variable">$uri</span>/ /index.html;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>原生 Node.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> httpPort = <span class="number">80</span></span><br><span class="line"></span><br><span class="line">http.<span class="title function_">createServer</span>(<span class="function">(<span class="params">req, res</span>) =&gt;</span> &#123;</span><br><span class="line">  fs.<span class="title function_">readFile</span>(<span class="string">&#x27;index.htm&#x27;</span>, <span class="string">&#x27;utf-8&#x27;</span>, <span class="function">(<span class="params">err, content</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (err) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;We cannot open &quot;index.htm&quot; file.&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    res.<span class="title function_">writeHead</span>(<span class="number">200</span>, &#123;</span><br><span class="line">      <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;text/html; charset=utf-8&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    res.<span class="title function_">end</span>(content)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;).<span class="title function_">listen</span>(httpPort, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Server listening on: http://localhost:%s&#x27;</span>, httpPort)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</blockquote>
<h4 id="Vue-Router进阶篇"><a href="#Vue-Router进阶篇" class="headerlink" title="Vue Router进阶篇"></a>Vue Router进阶篇</h4><h5 id="导航守卫"><a href="#导航守卫" class="headerlink" title="导航守卫"></a>导航守卫</h5><blockquote>
<p>“导航“表示路由正在发生改变。</p>
</blockquote>
<p>正如其名，<code>vue-router</code>提供的导航守卫主要用来通过跳转或取消的方式守卫导航。</p>
<p>有多种机会植入路由导航过程中：全局的，单个路由独享的，或者组件级的。</p>
<p>记住 <strong>参数或者查询的变化并不会触发进行/离开的导航守卫。</strong></p>
<p>你可以通过 <strong>观察<code>$router</code>对象</strong> 来应对这些变化，或使用 <code>beforeRouteUpdate</code>的组件内守卫。</p>
<h6 id="全局前置守卫"><a href="#全局前置守卫" class="headerlink" title="全局前置守卫"></a>全局前置守卫</h6><p>你可以使用<code>route.beforeEach</code>来注册一个全局的前置守卫：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;....&#125;)</span><br><span class="line">router.<span class="title function_">beforeEach</span>(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>当一个导航触发时，全局前置守卫按照创建顺序调用。</p>
<p>守卫是异步解析执行，此时导航在所有守卫<code>reslove</code>完之前一直处于 <strong>等待中。</strong></p>
<p>每个守卫接收三个参数：</p>
<ul>
<li><code>to: Route</code>：即将要进入的目标 <strong>路由对象</strong></li>
<li><code>from: Route</code>：当前导航正要离开的路由</li>
<li><code>next: Function</code>：一定要调用该方法来<code>reslove</code>这个钩子。执行效果依赖next函数的调用参数。<ul>
<li><code>next()</code>：进入管道种的下一个钩子。如果全部钩子执行完了，则导航的状态就是 <strong>confirmed(确认的)。</strong></li>
<li><code>next(false)</code>：中断当前的导航。如果浏览器的URL改变了(可能是用户手动或者浏览器的后退按钮)，那么URL地址会重置到<code>from</code>路由对应的地址。</li>
<li><code>next(&#39;/&#39;)</code>或者<code>next(&#123;path: &#39;/&#39;&#125;)</code>：跳转到一个不同的地址。当前的导航被中断，然后进行一次新的导航。你可以向<code>next</code>传递任意位置的对象，且允许设置诸如<code>replace: true</code>、<code>name: &#39;home&#39;</code>之类的选项以及任何用在<code>route-link</code>的<code>to</code> <strong>prop</strong> 或<code>route.push</code>中的选项。</li>
<li><code>next(error)</code>：如果传入<code>next</code>的参数是一个<code>Error</code>实例，则导航会被终止且该错误会被传递给<code>route.onError()</code>注册过的回调。</li>
</ul>
</li>
</ul>
<p><strong>确保<code>next</code>函数在任何给定的导航守卫中都被严格的调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。</strong></p>
<p>这里有一个在用户未能验证身份时，重定向到<code>/login</code>的示例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// BAD</span></span><br><span class="line">router.<span class="title function_">beforeEach</span>(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (to.<span class="property">name</span> !== <span class="string">&#x27;Login&#x27;</span> &amp;&amp; !isAuthenticated) <span class="title function_">next</span>(&#123; <span class="attr">name</span>: <span class="string">&#x27;Login&#x27;</span> &#125;)</span><br><span class="line">  <span class="comment">// 如果用户未能验证身份，则 `next` 会被调用两次</span></span><br><span class="line">  <span class="title function_">next</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// GOOD</span></span><br><span class="line">router.<span class="title function_">beforeEach</span>(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (to.<span class="property">name</span> !== <span class="string">&#x27;Login&#x27;</span> &amp;&amp; !isAuthenticated) <span class="title function_">next</span>(&#123; <span class="attr">name</span>: <span class="string">&#x27;Login&#x27;</span> &#125;)</span><br><span class="line">  <span class="keyword">else</span> <span class="title function_">next</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h6 id="全局解析守卫"><a href="#全局解析守卫" class="headerlink" title="全局解析守卫"></a>全局解析守卫</h6><p>你可以用<code>router.beforeReslove</code>注册一个全局守卫。这和<code>router.beforeEach</code>类似，区别是在导航被确认之前，<strong>同时在所有组件内守卫和异步路由组件被解析之后，</strong>解析守卫就会被调用。</p>
<h6 id="全局后置钩子"><a href="#全局后置钩子" class="headerlink" title="全局后置钩子"></a>全局后置钩子</h6><p>你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受<code>next</code>函数也不会改变导航本身：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">router.<span class="title function_">afterEach</span>(<span class="function">(<span class="params">to, <span class="keyword">from</span></span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h6 id="路由独享的守卫"><a href="#路由独享的守卫" class="headerlink" title="路由独享的守卫"></a>路由独享的守卫</h6><p>你可以在路由配置上直接定义<code>beforeEnter</code>守卫：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;foo&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="title class_">Foo</span>,</span><br><span class="line">      <span class="attr">beforeEnter</span>: <span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// ....</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这些守卫与全局前置守卫的方法参数是一样的。</p>
<h6 id="组件内的守卫"><a href="#组件内的守卫" class="headerlink" title="组件内的守卫"></a>组件内的守卫</h6><p>最后，你可以在路由组件内直接定义以下的路由导航守卫：</p>
<ul>
<li><code>beforeRouteEnter</code></li>
<li><code>beforeRouteUpdate</code></li>
<li><code>beforeRouteLeave</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Foo</span> = &#123;</span><br><span class="line">  <span class="attr">template</span>: <span class="string">`...`</span>,</span><br><span class="line">  beforeRouteEnter (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">    <span class="comment">// 在渲染该组件的对应路由被 confirm 前调用</span></span><br><span class="line">    <span class="comment">// 不！能！获取组件实例 `this`</span></span><br><span class="line">    <span class="comment">// 因为当守卫执行前，组件实例还没被创建</span></span><br><span class="line">  &#125;,</span><br><span class="line">  beforeRouteUpdate (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">    <span class="comment">// 在当前路由改变，但是该组件被复用时调用</span></span><br><span class="line">    <span class="comment">// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，</span></span><br><span class="line">    <span class="comment">// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。</span></span><br><span class="line">    <span class="comment">// 可以访问组件实例 `this`</span></span><br><span class="line">  &#125;,</span><br><span class="line">  beforeRouteLeave (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">    <span class="comment">// 导航离开该组件的对应路由时调用</span></span><br><span class="line">    <span class="comment">// 可以访问组件实例 `this`</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><code>beforeRouteEnter</code>守卫 <strong>不能</strong> 访问 <code>this</code>，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。</p>
<p>不过，你可以传一个回调给<code>next</code>来访问组件实例。</p>
<p>在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">beforeRouteEnter (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">  <span class="title function_">next</span>(<span class="function"><span class="params">vm</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 通过`vm`访问组件实例</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>注意<code>beforeRouteEnter</code>是支持给<code>next</code>传递回调的唯一守卫。</strong></p>
<p>对于<code>beforeRouteUpdate</code>和<code>beforeRouteLevel</code>来说，<code>this</code>已经可以用了，所以 <strong>不支持</strong> 传递回调，因为没有必要了。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">beforeRouteUpdate (to, form, next) &#123;</span><br><span class="line">  <span class="comment">// just use `this`</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = to.<span class="property">params</span>.<span class="property">name</span></span><br><span class="line">  <span class="title function_">next</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这个离开守卫通常用来禁止用户在还未保存修改前突然离开。</p>
<p>该导航可以通过<code>next(false)</code>来取消。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">beforeRouteLevel (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">  <span class="keyword">const</span> answer = <span class="variable language_">window</span>.<span class="title function_">confirm</span>(<span class="string">&#x27;Do you really want to level?you have unsaved changes!&#x27;</span>)</span><br><span class="line">  <span class="keyword">if</span>(answer) &#123;</span><br><span class="line">    <span class="title function_">next</span>()</span><br><span class="line">  &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="title function_">next</span>(<span class="literal">false</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h6 id="完整的导航解析流程"><a href="#完整的导航解析流程" class="headerlink" title="完整的导航解析流程"></a>完整的导航解析流程</h6><ol>
<li>导航被触发</li>
<li>在失活的组件里调用<code>beforeRouteLevel</code>守卫</li>
<li>调用全局的<code>beforeEach</code>守卫</li>
<li>在重用的组件里调用<code>beforeRouteUpdate</code>守卫</li>
<li>在路由配置中调用<code>beforeEnter</code></li>
<li>解析异步路由组件</li>
<li>在被激活的路由组件中调用<code>beforeRouteEnter</code></li>
<li>调用全局的<code>beforeReslove</code></li>
<li>导航被确认</li>
<li>调用全局的<code>afterEach</code>钩子</li>
<li>触发DOM更新</li>
<li>调用<code>beforeRouteEnter</code>守卫中传给<code>next</code>的回调函数，创建好的组件实例会作为回调函数的参数传入。</li>
</ol>

    </div>

    
    
    
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/js/" rel="tag"># js</a>
              <a href="/tags/vuejs/" rel="tag"># vuejs</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/08/06/chrome%E6%8E%A7%E5%88%B6%E5%8F%B0%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AD%A6%E5%91%8A/" rel="prev" title="chrome控制台的一些警告">
      <i class="fa fa-chevron-left"></i> chrome控制台的一些警告
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/08/07/git-log%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8/" rel="next" title="git-log的进阶使用">
      git-log的进阶使用 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E7%AE%80%E5%8D%95%E7%9A%84%E8%B7%AF%E7%94%B1"><span class="nav-number">1.</span> <span class="nav-text">从零开始简单的路由</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Vue-Router%E5%9F%BA%E7%A1%80%E7%AF%87"><span class="nav-number">2.</span> <span class="nav-text">Vue Router基础篇</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%BB%8D"><span class="nav-number">2.1.</span> <span class="nav-text">基本介绍</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%B5%B7%E6%AD%A5"><span class="nav-number">2.2.</span> <span class="nav-text">起步</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#Html"><span class="nav-number">2.2.1.</span> <span class="nav-text">Html</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#JavaScript"><span class="nav-number">2.2.2.</span> <span class="nav-text">JavaScript</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%8C%B9%E9%85%8D"><span class="nav-number">2.3.</span> <span class="nav-text">动态路由匹配</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96"><span class="nav-number">2.3.1.</span> <span class="nav-text">响应路由参数的变化</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E7%9A%84%E8%B7%AF%E7%94%B1%E6%88%96404-Not-found-%E8%B7%AF%E7%94%B1"><span class="nav-number">2.3.2.</span> <span class="nav-text">捕获所有的路由或404 Not found 路由</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E9%AB%98%E7%BA%A7%E5%8C%B9%E9%85%8D%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.3.3.</span> <span class="nav-text">高级匹配模式</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%8C%B9%E9%85%8D%E4%BC%98%E5%85%88%E7%BA%A7"><span class="nav-number">2.3.4.</span> <span class="nav-text">匹配优先级</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1"><span class="nav-number">2.4.</span> <span class="nav-text">嵌套路由</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%BC%96%E7%A8%8B%E5%BC%8F%E7%9A%84%E5%AF%BC%E8%88%AA"><span class="nav-number">2.5.</span> <span class="nav-text">编程式的导航</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#router-push-location-onComplete-onAbort"><span class="nav-number">2.5.1.</span> <span class="nav-text">router.push(location, onComplete?, onAbort?)</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#router-replace-location-onComplete-onAbort"><span class="nav-number">2.5.2.</span> <span class="nav-text">router.replace(location, onComplete?, onAbort?)</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#router-go-n"><span class="nav-number">2.5.3.</span> <span class="nav-text">router.go(n)</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C-History"><span class="nav-number">2.5.4.</span> <span class="nav-text">操作 History</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%91%BD%E4%BB%A4%E8%B7%AF%E7%94%B1"><span class="nav-number">2.6.</span> <span class="nav-text">命令路由</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE"><span class="nav-number">2.7.</span> <span class="nav-text">命名视图</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE"><span class="nav-number">2.7.1.</span> <span class="nav-text">嵌套命名视图</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E9%87%8D%E5%AE%9A%E5%90%91%E5%92%8C%E5%88%AB%E5%90%8D"><span class="nav-number">2.8.</span> <span class="nav-text">重定向和别名</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#%E9%87%8D%E5%AE%9A%E5%90%91"><span class="nav-number">2.8.1.</span> <span class="nav-text">重定向</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%88%AB%E5%90%8D"><span class="nav-number">2.9.</span> <span class="nav-text">别名</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82"><span class="nav-number">2.10.</span> <span class="nav-text">路由组件传参</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.10.1.</span> <span class="nav-text">布尔模式</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.10.2.</span> <span class="nav-text">对象模式</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.10.3.</span> <span class="nav-text">函数模式</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#HTML5-History%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.11.</span> <span class="nav-text">HTML5 History模式</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E6%A0%97%E5%AD%90"><span class="nav-number">2.11.1.</span> <span class="nav-text">后端配置栗子</span></a></li></ol></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Apache"><span class="nav-number">3.</span> <span class="nav-text">Apache</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Vue-Router%E8%BF%9B%E9%98%B6%E7%AF%87"><span class="nav-number">4.</span> <span class="nav-text">Vue Router进阶篇</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB"><span class="nav-number">4.1.</span> <span class="nav-text">导航守卫</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB"><span class="nav-number">4.1.1.</span> <span class="nav-text">全局前置守卫</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%85%A8%E5%B1%80%E8%A7%A3%E6%9E%90%E5%AE%88%E5%8D%AB"><span class="nav-number">4.1.2.</span> <span class="nav-text">全局解析守卫</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%85%A8%E5%B1%80%E5%90%8E%E7%BD%AE%E9%92%A9%E5%AD%90"><span class="nav-number">4.1.3.</span> <span class="nav-text">全局后置钩子</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB"><span class="nav-number">4.1.4.</span> <span class="nav-text">路由独享的守卫</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB"><span class="nav-number">4.1.5.</span> <span class="nav-text">组件内的守卫</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AF%BC%E8%88%AA%E8%A7%A3%E6%9E%90%E6%B5%81%E7%A8%8B"><span class="nav-number">4.1.6.</span> <span class="nav-text">完整的导航解析流程</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">田园隐士</p>
  <div class="site-description" itemprop="description">talk is cheap, show me the code</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">347</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">53</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">115</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">田园隐士</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">587k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">8:53</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  

  

</body>
</html>
